import React, { PureComponent } from "react";
import { Layout, Menu } from "antd";
import "./index.css";
import { connect } from "dva";
import menuData from "@/common/menu";
import { RouteWithSubRoutes } from "@/router"
import { Switch, Redirect, Route, Link } from "dva/router";
import NotFound from '@/routes/Exception/404';
// import { getLoginStatu } from "@/utils/storage"

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
const getIcon = (icon) => {
  if (typeof icon === "string") {
    return React.createElement(require("@ant-design/icons")[icon]);
  }
  return icon;
};

@connect(({ routing }) => ({ location: routing.location }))
class MySider extends PureComponent {
  state = {
    collapsed: false,
  };
  //获取当前选中
  getSelectedMenuKeys = () => {
    return [this.props.location.pathname];
  };
  onCollapse = (collapsed) => {
    this.setState({ collapsed });
  };
  getMenuItemPath = (item) => {
    const itemPath = item.path;
    const icon = getIcon(item.icon);
    const { name } = item;

    const { location } = this.props;
    return (
      <Link to={itemPath} replace={itemPath === location.pathname}>
        {icon}
        <span>{name}</span>
      </Link>
    );
  };
  getNavMenuItems = (menusData) => {
    if (!menusData) {
      return [];
    }

    return menusData
      .filter(({ name, showMenu = true }) => name && showMenu)
      .map((item) => {
        return this.getSubMenuOrItem(item);
      });
  };

  getSubMenuOrItem = (item) => {
    if (item.children && Array.isArray(item.children)) {
      const childrenItems = this.getNavMenuItems(item.children);
      // 当无子菜单时就不展示菜单
      if (childrenItems && childrenItems.length > 0) {
        return (
          <SubMenu
            title={
              item.icon ? (
                <span>
                  {getIcon(item.icon)}
                  <span>{item.name}</span>
                </span>
              ) : (
                item.name
              )
            }
            key={item.path}
          >
            {childrenItems}
          </SubMenu>
        );
      }
    } else {
      return (
        <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>
      );
    }
  };

  render() {
    const { collapsed } = this.state;
    let routes = this.props.routes || [];
    console.log(routes)
    let selectedKeys = this.getSelectedMenuKeys();
    return (
      <Layout style={{ minHeight: "100vh" }}>
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" selectedKeys={selectedKeys}>
            {this.getNavMenuItems(menuData)}
          </Menu>
        </Sider>
        <Layout className="site-layout">
          {/* <Header className="site-layout-background" style={{ padding: 0, background: '#fff' }} /> */}
          <Content style={{ margin: "0 16px" }}>
            <div
              className="site-layout-background"
              style={{ padding: 24, minHeight: 360 }}
            >
              <Switch>
                {/* {!getLoginStatu() && <Redirect to="/user/login" />} */}
                <Redirect exact from="/" to="/shares/shrinkHalfYear" />
                {routes.map((route, i) => (
                  <RouteWithSubRoutes key={i} {...route} />
                ))}
                <Route render={NotFound} />
              </Switch>
            </div>
          </Content>
          <Footer style={{ textAlign: "center" }}>
            Ant Design ©2018 Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    );
  }
}

export default MySider;
